<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<body class="body_hei edit">
<div th:replace="include/head.html::html"></div>
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin"
     style="padding: 20px 0 0 0;background-color: #FFFFFF;height: 100%">
    <input type="hidden" name="parentId" th:field="${bean.parentId}">
    <input type="hidden" name="oid" th:field="${bean.oid}">
    <div class="layui-form-item">
        <label class="layui-form-label">标题:</label>
        <div class="layui-input-inline">
            <input type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input" th:field="${bean.title}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">链接:</label>
        <div class="layui-input-inline">
            <input type="text" name="url" lay-verify="required" placeholder="请输入链接" autocomplete="off"
                   class="layui-input" th:field="${bean.url}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限:</label>
        <div class="layui-input-inline">
            <input type="text" name="permission" lay-verify="required" placeholder="请输入权限" autocomplete="off"
                   class="layui-input" th:field="${bean.permission}">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="iconPicker" class="layui-form-label">选择图标</label>
        <div class="layui-input-block">
            <input type="text" name="iconClass" id="iconPicker" lay-filter="iconPicker" class="layui-input" th:field="${bean.iconClass}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline">
            <select name="type">
                <option value="">请选择类型</option>
                <option th:selected="${bean.type == 1}" value="1">列表</option>
                <option th:selected="${bean.type == 2}" value="2">权限</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序:</label>
        <div class="layui-input-inline">
            <input type="number" name="sortNum" lay-verify="required" placeholder="请输入排序" autocomplete="off"
                   class="layui-input" th:field="${bean.sortNum}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">介绍:</label>
        <div class="layui-input-block" style="width: 80%;">
            <textarea name="remark" th:text="${bean.remark}" class="layui-textarea" lay-verify=""></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="submit" id="submit" value="确认">
    </div>
</div>
<script>
    layui.use(['jquery','iconPicker', 'form'], function () {
        var iconPicker = layui.iconPicker,
            form = layui.form;
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            }
        });
        /**
         * 选中图标 （常用于更新时默认选中图标）
         * @param filter lay-filter
         * @param iconName 图标名称，自动识别fontClass/unicode
         */
        iconPicker.checkIcon('iconPicker', $("#iconPicker").val());
    });
</script>
</body>
</html>